<template>
    <el-dialog title="详情" :visible.sync="isOpen" width="85%" :before-close="closeDelDialog" append-to-body>
        <div class="app-container">
            <el-row :gutter="20">

                <!--部门数据-->
                <el-col :span="4" :xs="24">
                    <fileTrees v-if="superviseRow.tenantCode != undefined" @handleNodeClick="onTreeClick"
                        :tableHeight="treeHeight - 90" :isnoClick="isnoClick" :menuId="menuId" :tenantCode="tenantCode">
                    </fileTrees>
                </el-col>
                <!--离线接收数据-->
                <el-col :span="20" :xs="24" v-show="isShow">
                    <queryCriteriaList v-if="listFrom.length > 0" :showSearch="showSearch" :listFrom="listFrom"
                        @resetQuery="resetQuery" @handleQuery="handleQuery" :tenantCode="tenantCode" ref="queryForm">
                    </queryCriteriaList>
                    <el-row :gutter="10" class="mb8" ref="refbut">
                        <el-col :span="1.5">
                            <el-button type="primary" plain icon="el-icon-takeaway-box" v-hasPermi="['archive:supervision:supervisesNew:jdzd']"
                                @click="handleButton()">监督指导</el-button>
                        </el-col>
                    </el-row>
                    <tableList v-if="tableHeight" :tableHeaderList="tableHeaderList"
                        @handleSelectionChange="handleSelectionChange" :tableData="tableData" :loading="loading"
                        :tableHeight="tableHeight" :tenantCode="tenantCode" @celldblclick="celldblclick"
                        @sortChange="sortChange" ref="ref" ></tableList>
                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getlistPost" />
                </el-col>
                <el-col :span="20" :xs="24" v-show="!isShow" class="empty1">
                    <el-empty :image-size="200"></el-empty>
                </el-col>

            </el-row>
            <!--start  组件详情 -->
            <jianDetailsOpen v-if="jianDetailsOpen" :open="jianDetailsOpen" :celldbData="celldbData"
                :tenantCode="tenantCode" @detailsHandleClose="detailsHandleClose">
            </jianDetailsOpen>
            <!--end 组件详情 -->
            <!-- start 组卷\项目详情 -->
            <juanDetailsOpen v-if="juanDetailsOpen" :open="juanDetailsOpen" :celldbData="celldbData"
                :tenantCode="tenantCode" @detailsHandleClose="detailsHandleClose"></juanDetailsOpen>
            <!-- end 组卷\项目详情 -->

            <!-- start 监督指导 -->
            <supervisesData v-if="isSupervisesOpen" :isSupervisesOpen="isSupervisesOpen" @closeDelDialogSupervises="closeDelDialogSupervises" :superviseRow="superviseRow"></supervisesData>
            <!-- end 监督指导 -->
        </div>
    </el-dialog>
</template>

<script>
import {
    getqueryfieldList,
    getlistbytreenodeList,
    getthbytreenodeHeaderList,
} from "@/api/archive/fileCollection/offlinReception.js";
import queryCriteriaList from "@/components/queryCriteriaList/index.vue"  //查询列表
import fileTrees from "@/components/fileTrees/index.vue"  //档案树
import { getGroupTree } from "@/api/archive/archivesCategory.js"
import tableList from "@/components/tableList/index.vue"
import treeHeight from '@/mixins/treeHeight'//计算左侧树的高度
import jianDetailsOpen from '@/components/componentsJianDetails/index.vue' //件详情
import juanDetailsOpen from '@/components/componentsJuanDetails/index.vue' //卷详情'
import supervisesData from '@/views/archive/supervision/supervisesNew/supervisesData.vue'
import { getLastIndexOf } from "@/utils/index.js"
import { getTypeObject } from '@/api/archive/dict/dictManageData'
export default {
    mixins: [treeHeight], // 混入方法
    archive_Dicts: ['MJ', 'BGQX', 'IS_OPENS', 'CSLY'],
    props: ['isOpen', 'superviseRow'],
    components: {
        queryCriteriaList,
        fileTrees,
        tableList,
        jianDetailsOpen,
        juanDetailsOpen,
        supervisesData
    },
    watch: {
        superviseRow: {
            handler(newVal) {
                this.tenantCode = newVal.tenantCode

            },
            immediate: true
        }
    },
    data() {
        return {
            tenantCode: undefined,
            isnoClick: true,
            scroll: "",
            loading: false,
            // 显示搜索条件
            showSearch: true,
            listFrom: [], //查询框列表
            isShow: false, //是否显示右侧数据
            categoryinfo: "", //档案门类回显信息
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            tableHeaderList: [], //table表头数据
            tableHeaderListV: [], //卷内目录table表头数据
            tableData: [],//table列表数据
            jianDetailsOpen: false,//件详情弹窗
            juanDetailsOpen: false,//卷详情弹窗
            openInfo: { //件 卷  项目
                opens: false,
                categoryId: undefined,
                menuId: undefined,
                type: undefined
            },
            tableHeight: "",
            ids: undefined,
            detail: [],
            single: "",
            multiple: "",
            rowList: "", //当前点击的数据
            subStr: "",  //获取点击当前树的 件 卷  项目 截取 sub_table_name显示
            categoryType: '',
            categoryInfo: "",//档案门类树门类根据categoryID回显门类详情 根据 storeMode 判断是否可以装盒  storeMode==0，盒   storeMode==1，卷
            permitInfo: "",
            printList: [],
            printListV: [],
            dataStr: [],
            menuId: '',
            isSupervisesOpen:false
        }
    },

    created() {
        this.menuId = this.$route.meta.menuId
    },


    methods: {
        //打开监督指导
        handleButton(){
            var that=this;
            this.isSupervisesOpen=true;
        },
        //关闭监督指导
        closeDelDialogSupervises(){
            var that=this;
            this.isSupervisesOpen=false;
        },
        //动态设置table的高度
        tableHeightData() {
            this.$nextTick(
                () => {
                    let h = document.documentElement.clientHeight
                    //     console.log(this.$refs.queryForm.$el.offsetHeight, this.$refs.refbut.$el.offsetHeight, "sdklfjklliuhaiorng")
                    h = h - 230
                    if (this.$refs.queryForm) { // 页面上如果有面包屑区域徐减去它的高度
                        h = h - this.$refs.queryForm.$el.offsetHeight
                    }

                    if (this.$refs.refbut) { // 页面上如果有分页区域徐减去它的高度
                        h = h - this.$refs.refbut.$el.offsetHeight
                    }
                    // console.log(h,"sdjfdklsjfkl")
                    this.tableHeight = h > 310 ? h : 310 // 根据自己项目定高度
                    return h
                }
            )

        },

        // 树节点单击事件
        onTreeClick(data) {
            // console.log(data, "+++")
            this.isnoClick = false
            this.treeRowData = data;
            if (data.categoryId != null) {
                this.isShow = true
            } else {
                this.isShow = false
                this.$refs.ref.clearSort()
            }
            if (this.$refs.queryForm != undefined) {
                this.$refs.queryForm.queryParams = {};
            }
            if (data.nodeType == null || data.nodeType == "t" || data.nodeType == "f") {
                this.isnoClick = true;
                return false;
            }
            getGroupTree(data.categoryId, { tenantCode: this.tenantCode }).then(response => {
                this.categoryInfo = response.data
            });
            this.loading = true;
            this.queryParams = data;
            this.queryParams.pageNum = 1;
            this.queryParams.pageSize = 10;
            this.queryParams.tenantCode = this.tenantCode;
            this.queryParams.order = '';
            if (this.queryParams.sub_table_name != undefined) {
                this.subStr = getLastIndexOf(this.queryParams.sub_table_name);
                let stb = this.queryParams.sub_table_name;
                let stbArr = stb.split("_");
                this.categoryType = stbArr[stbArr.length - 3];
            } else {
                this.getGroupTreePost(data.categoryId);
            }
            this.getqueryfieldListPost();//点击树节点获取查询字段
            this.getlistHeaderPost();/**点击树节点,获取table表头数据 */

        },

        //档案门类树门类根据categoryID回显
        getGroupTreePost(ID) {
            getGroupTree(ID, { tenantCode: this.tenantCode }).then(response => {
                if (response.data.type == "0") { //件
                    this.queryParams.sub_table_name = response.data.fileTableName;
                } else if (response.data.type == "1") { //卷
                    this.queryParams.sub_table_name = response.data.folderTableName;
                } else { //项目
                    this.queryParams.sub_table_name = response.data.itemTableName;
                }
                this.subStr = getLastIndexOf(this.queryParams.sub_table_name);
                let stb = this.queryParams.sub_table_name;
                let stbArr = stb.split("_");
                this.categoryType = stbArr[stbArr.length - 3];
            });
        },



        /** 点击树节点获取查询字段 */
        getqueryfieldListPost(data) {
            getqueryfieldList({
                categoryId: this.queryParams.categoryId,
                menuId: this.queryParams.menuId,
                subTableName: this.queryParams.sub_table_name,
                tenantCode: this.tenantCode
            }).then(response => {
                this.listFrom = response.rows;
            });
        },
        /**点击树节点,获取table表头数据 */
        getlistHeaderPost() {
            this.queryParams.searchcolumn = undefined
            getthbytreenodeHeaderList({
                categoryId: this.queryParams.categoryId,
                menuId: this.queryParams.menuId,
                subTableName: this.queryParams.sub_table_name,
                tenantCode: this.tenantCode
            }
            ).then(response => {
                this.tableHeaderList = response.rows;
                var fields = []
                for (var i in response.rows) {
                    fields.push(response.rows[i].FIELD_NAME)
                }
                this.queryParams.fields = fields.toString();


                //获取指定字典列表
                var headerlist = [];
                for (var i = 0; i < this.tableHeaderList.length; i++) {
                    if (this.tableHeaderList[i].SHOWTYPE.toString().indexOf('5') != -1) {
                        this.tableHeaderList[i].SHOWTYPE = 5
                    }
                    if (this.tableHeaderList[i].SHOWTYPE == 5) {
                        // console.log(this.tableHeaderList[i])
                        headerlist.push(this.tableHeaderList[i].FIELD_NAME)
                    }
                }
                // console.log(headerlist,"++++")
                if (headerlist.length > 0) {
                    getTypeObject(headerlist, { tenantCode: this.tenantCode }).then((res) => {
                        this.dictList = res.data;
                    })
                }
                this.getlistPost();
            });
        },
        /** 点击树节点,获取table数据*/
        getlistPost() {
            getlistbytreenodeList(this.queryParams).then(response => {
                this.tableData = response.rows;
                this.total = response.total;
                this.loading = false;
                this.tableHeightData();
                this.isnoClick = true;
            });
        },

        //是否选择数据
        handleSelectionChange(ids, single, multiple, selection) {
            this.ids = ids.toString();
            this.single = single;
            this.multiple = multiple;
            console.log(selection)
            this.detail = selection.map(item => {
                return {
                    daDh: item.DH,
                    daBgqx: item.BGQX,
                    daMj: item.MJ,
                    daId: item.ID,
                    daTitle: item.TITLE == undefined ? item.XMMC : item.TITLE,
                    daNd: item.ND
                }
            });
        },

        //表单重置
        resetQuery() {
            this.queryParams.searchcolumn = undefined
            this.queryParams.order = undefined;
            this.$refs.ref.clearSort()
            this.getlistPost();
        },
        //点击搜索
        handleQuery(searchcolumn) {
            var column = searchcolumn.filter(item => { return item.value !== '' && item.value !== null })
            this.queryParams.searchcolumn = column
            this.queryParams.order = undefined;
            this.$refs.ref.clearSort()
            this.getlistPost();
        },
        //刷新页面
        queryTableTap() {
            this.queryParams.order = undefined;
            this.getlistPost();
            this.$refs.ref.clearSort()
        },

        //著录成功
        submitDetail() {
            this.jianOpen = false;
            this.juanOpen = false //卷
            this.projectOpen = false; //项目
            this.getlistHeaderPost();
        },
        //双击列表进入详情页面
        celldblclick(row) {
            var level = "";
            var label = "";
            if (getLastIndexOf(this.queryParams.sub_table_name) == "F") {  //F 件
                level = 0
                label = row.TITLE;
            } else if (getLastIndexOf(this.queryParams.sub_table_name) == "V") { //卷
                level = 1
                label = row.TITLE;
            } else { //项目
                level = 3
                label = row.XMMC;

            }
            this.celldbData = {
                id: row.ID,
                categoryId: this.queryParams.categoryId,
                menuId: this.queryParams.menuId,
                sub_table_name: this.queryParams.sub_table_name,
                label: this.queryParams.label,
                level: level,
                ifSub_table_name: this.queryParams.sub_table_name,
                isDel: "0",  //判断是回收站数据还是接收收据 isDel:1  回收站    isDel:0 //离线接收、档案接收、在线接收
                tableHeaderList: this.tableHeaderList
            }
            this.$nextTick(() => {
                if (this.subStr == "F") {  //F 进入件详情
                    this.jianDetailsOpen = true;
                } else { //进入卷详情 和项目详情
                    this.juanDetailsOpen = true
                }
            })
        },
        //关闭详情页面
        detailsHandleClose() {
            this.jianDetailsOpen = false;
            this.juanDetailsOpen = false;
        },

        //关闭
        closeDelDialog() {
            var that = this;
            this.openInfo = ""
            that.$emit("closeDelDialog")
        },
        //排序
        sortChange(val) {
            // console.log(val, "ksdfjkl")
            this.queryParams.order = val;
            // console.log(this.queryParams, "+++")
            this.getlistPost();
        },
    }
}
</script>
<style lang="less" scoped>

/deep/.el-dialog {
  margin: 25px auto 0 !important;
}
::v-deep .el-table--medium .el-table__cell {
    padding: 7px 0 !important;
}

::v-deep .el-select-mdata {
    width: 100%
}

// .fiex {
//     display: flex;
//     justify-content: flex-end;
// }

// ::v-deep .el-dialog {
//     padding: 0px 30px 20px 0px !important;
//     display: flex;
//     flex-direction: column;
//     margin: 0 !important;
//     position: absolute;
//     top: 50%;
//     left: 50%;
//     transform: translate(-50%, -50%);
//     max-height: calc(100% - 30px);
//     max-width: calc(100% - 30px);
// }

// ::v-deep .el-dialog .el-dialog__body {
//     flex: 1;
//     overflow-y: auto;
// }

::v-deep .el-form-item__content {
    line-height: 26px;
}

.empty1 {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: calc(100vh - 200px);
}</style>
